<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【js-05】json是什么，如何处理转义？</h2>

            <h3>小课堂【成都】</h3>

            <p style="text-align: center;">分享人：童海琴</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <h3>JSON的诞生</h3>
            <p style="text-align:left;font-size:1.5rem">JSON一种数据交换格式。在JSON出现之前，
                大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，
                加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，即使你努力钻研几个月，也未必搞得清楚XML的规范。<br>
            终于，在2002年的一天，道格拉斯·克罗克福特发明了JSON这种超轻量级的数据交换格式。<br>
            由于JSON非常简单，很快就风靡Web世界。而在JavaScript中，我们可
                以直接使用JSON，因为JavaScript内置了JSON的解析。把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON
                格式的字符串，这样才能够通过网络传递给其他计算机。如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaS
                cript对象，就可以在JavaScript中直接使用这个对象了。</p>
</p>
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <section>
              <div style="display:inline-block;vertical-align:top">
            <p>JSON语法</p>
            <ul>
              <li>数据在名称/值对中</li>
              <li>数据由逗号分隔</li>
              <li>大括号保存对象</li>
              <li>中括号保存数组</li>
            </ul>
              </div>
              &emsp;&emsp;&emsp;&emsp;&emsp;
              <div style="display:inline-block">
            <p>JSON值</p>
            <ul>
              <li>数字(整数/浮点数)</li>
              <li>字符串(双引号)</li>
              <li>布尔值(true/false)</li>
              <li>数组(中括号中)</li>
              <li>对象(大括号中)</li>
              <li>null</li>
            </ul>
              </div>
            </section>
            <section>
                <h3>实例</h3>
                <p style="text-align: left">JSON 数据的书写格式是：名称/值对。</p>
                <p style="text-align: left">名称/值对组合中的名称写在前面（在双引号中），值对写在后面，中间用冒号隔开，</p>
                <p style="text-align: left">其中 值 可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null</p>
                <p style="text-align: left">使用方式：</p>
                <pre>
                    <code style="background-color: #1c1e20">
var json = {"name":"myname","password":123456}
                    </code>
                </pre>
            </section>
            <section>
                <p style="text-align: left">或者是嵌套使用</p>
                <pre>
                    <code style="background-color: #1c1e20">
                      myObj = {
                          "name":"runoob",
                          "alexa":10000,
                          "sites": {
                              "site1":"www.runoob.com",
                              "site2":"m.runoob.com",
                              "site3":"c.runoob.com"
                          }
                      }
                      console.log(myObj)
//输出结果：
Object {name: "runoob", alexa: 10000, sites: Object}
                    </code>
                </pre>
            </section>
            <section>
                <p style="text-align: left">转义概述</p>
                <p style="text-align: left">为什么需要转义？在js中我们使用的js对象进行处理，但是在与后端数据交换的时候，我们发送规定的json格式的字符串，所以在给后端发送或接受数据的时候，需要</p>
                <p style="text-align: left">{name:"myname",password:123456} <–>  "{"name":"myname","password":123456}"</p>
                <p style="text-align: left">其中json字符串转js对象，调用parse方法：</p>
                <p style="text-align: left">js对象 = JSON.parse(json字符串);</p>
                <p style="text-align: left">js对象转json字符串，调用stringify方法：</p>
                <p style="text-align: left">json字符串 = JSON.stringify(js对象);</p>
            </section>
        </section>
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section>
            <p style="text-align: left">在json字符串转换成对象，还有eval_r('('+json字符串+')')这个方法，但是在对目标数据进行读取时，可能会出现一些意外的错误：</p>
            <pre>
                <code style="background-color: #1c1e20">
var value = 1;
var jsonstr = '{"data1":"hello","data2":++value}';
var data1 = eval_r('('+jsonstr+')');
console.log(data1);//这时value值为2
var data2=JSON.parse(jsonstr);
console.log(data2);//报错
                </code>
            </pre>
        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <p style="text-align: left">原因：eval_r获取的json对象的值中，如果有执行代码，也将照样执行！所以若不能保证数据的安全性，不要使用eval_r方法进行转义。</p>
        </section>
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <p style="text-align: left">我们常看到{name:"myname",password:123456}和{"name":"myname","password":123456}这样两种格式，即js对象和json，然而js对象和json有什么不一样的地方？</p>
        </section>
        <section>
            <h3>7.参考文献</h3>
        </section>
        <section>
            <p style="text-align: left">参考一：<a href="http://baike.baidu.com/link?url=9IQTsK4HUx5AIrIA6cr2Z1Hi0EwYwJ20VFP5QiCO_TOf46VWmWll_dXETyEvwYkt-5IV0tCk4kItvEO9tyhDza" target="_blank">百度百科</a></p>
            <p style="text-align: left">参考二：<a href="http://blog.csdn.net/qianyiyiding/article/details/51615961" target="_blank">Json对象和Json字符串的区别</a></p>
            <p style="text-align: left">参考三：<a href="http://blog.csdn.net/goskalrie/article/details/52151175" target="_blank">json属性名必须加引号的讨论</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <h4>感谢观看</h4>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>

    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
